<template>
  <!--歌手信息展示组件-->
  <div class="singerInfo">
    <div class="centent">
      <div class="head">
        <img :src="info.img1v1Url" alt />
      </div>
      <div class="text">
        <h1>{{info.name}}</h1>
        <div class="expand">
          <p>简介：{{info.briefDesc}}</p>
          <div class="showText" v-if="showKye">
            简介：{{info.briefDesc}}
          </div>
          <span @click="showKye=!showKye">展开</span>
        </div>
        <ul class="info">
            <li @click="skipGrabble('GrabbleType1',info.name)">
                <h4>单曲</h4>
                <span>{{info.musicSize}}</span>
            </li>
            <li class="cen" @click="skipGrabble('GrabbleType10',info.name)">
                <h4>专辑</h4>
                <span>{{info.albumSize}}</span>
            </li>
            <li>
                <h4>MV</h4>
                <span>{{info.mvSize}}</span>
            </li>
        </ul>
        <div class="toolbar">
            <span class="green">播放歌手热门歌曲</span>
            <span>关注 111.5万</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            showKye:false
        }
    },
    props:['info'],
    methods:{
      skipGrabble(path, val) {
      this.$router.push({
        name: path,
        query: {
          keyWord: val
        }
      });
    }
    },
    mounted(){
      //console.log(this.info)
    }
};
</script>

<style scoped lang='less'>
.singerInfo {
  background-color: #f5f5f5;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  .centent {
    .head {
      width: 200px;
      display: inline-block;
      margin-right: 50px;
      img {
        width: 200px;
        height: 200px;
        border-radius: 50%;
      }
    }
    .text {
      display: inline-block;
      width: 800px;
      font-size: 14px;
      line-height: 24px;
      h1 {
        font-size: 38px;
        font-weight: 400;
      }
      .expand {
        position: relative;
        p {
          margin: 0;
          display: inline-block;
          width: 90%;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        span:hover {
          cursor: pointer;
          color: #31c27c;
        }
        .showText {
          position: absolute;
          top: 40px;
          left: 400px;
          line-height: 34px;
          background: #fff;
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
          border-radius: 4px;
          padding: 20px;
        }
      }
    }
    .info{
        padding: 0;
        cursor: pointer;
        li{
            display: inline-block;
            padding: 0 20px;
            line-height: 0px;
            h4{
                display: inline-block;
            }
            span{
                margin-left: 5px;
            }
        }
        li.cen{
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;
        }
    }
    .toolbar{
        cursor: pointer;
        span{
            border: 1px solid #c9c9c9;
            margin:0 10px ;
            padding: 10px;
            border-radius: 5px;
        }
        span.green{
            border: 1px solid #31c27c;
            background-color: #31c27c;
            color: #fff;
        }
    }
  }
}
</style>